import React, { useState, useEffect } from 'react';
import { Button, Steps } from 'antd';
import { connect } from 'umi';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
import Step4 from './components/Step4';
import styles from './style.less';

const { Step } = Steps;

const CreatingSteps = ({ current, backTable, nowStep, state }) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [payload, setPayload] = useState(nowStep.id);


  const getCurrentStepAndComponent = (current) => {
    return setCurrentStep(current);
  };
  const handleId = (payload) => {
    setPayload(payload);
  };


  useEffect(() => {
  }, []);
  const componentShow = (currentStep) => {
    switch (currentStep) {
      case 0:
        return (
          <Step1
            CommodityId={payload}
            reviseState={state}
            defaultVal={nowStep}
            handleCurrent={getCurrentStepAndComponent}
            handleId={handleId}
          />
        );
      case 1:
        return (
          <Step2
            reviseState={state}
            handleCurrent={getCurrentStepAndComponent}
            CommodityId={payload}
            complete={backTable}
          />
        );
      default:
        break;
    }
  };
  return (
    <div className="Steps_Card">
      <div className="steps_head">
        <Button type="primary" style={{ width: 75 }} onClick={backTable}>
          取消
        </Button>
        <Steps current={currentStep} className={styles.steps}>
          <Step title="赠品信息" />
          <Step title="赠品图片" />
        </Steps>
      </div>
      {componentShow(currentStep)}
    </div>
  );
};

export default connect(({ commodityManagementAndCommodityCreatingSteps }) => ({
  current: commodityManagementAndCommodityCreatingSteps.current,
}))(CreatingSteps);
